<template>
  <div>
    <el-row>
      <el-col :span="8">
        <p class="pinformation" style="margin-top: 10px">公式特别备注</p>
      </el-col>
      <el-col :span="16">
        <p class="pinformation" style="margin-top: 10px">定量公式</p>
        <screenshotView
          :fileList="form.formulaList"
          :height="540"
        ></screenshotView>
      </el-col>
    </el-row>
    <p class="pinformation" style="margin-top: 10px">结果计算表示</p>
    <screenshotView
      :fileList="form.resultFileList"
      :height="280"
    ></screenshotView>
    <p class="pinformation" style="margin-top: 10px">修约规则</p>
    <screenshotView :fileList="form.ruleFileList" :height="21"></screenshotView>
  </div>
</template>

<script setup>
import screenshotView from "../screenshotView/screenshotView";

import { getResult } from "@/api/store/method";

const form = ref({ formulaList: [], resultFileList: [], ruleFileList: [] });

const methodId = ref("");

const props = defineProps({
  methodId: {
    type: String, //参数类型
    required: true, //是否必须传递
  },
});

watch(
  () => props.methodId,
  () => {
    if (!props.methodId) return;
    methodId.value = props.methodId;
    getList();
  },
  { deep: true, immediate: true }
);

function getList() {
  getResult(methodId.value).then((response) => {
    form.value.formulaList = [];
    response.data.formulaList.forEach((item) => {
      if (!item.fileList[0]) return;
      form.value.formulaList.push(item.fileList[0]);
    });
    form.value.resultFileList = [];
    response.data.resultFileList.forEach((item) => {
      if (!item.fileList[0]) return;
      form.value.resultFileList.push(item.fileList[0]);
    });
    form.value.ruleFileList = [];
    response.data.ruleFileList.forEach((item) => {
      if (!item.fileList[0]) return;
      form.value.ruleFileList.push(item.fileList[0]);
    });
  });
}
</script>
